<template>
	<view class="home_container" :style="{
      'padding-top': safeAreaInsets.top + 'px',
    }">
		<view class="title">
			<image class="logo" :src="logo" mode="aspectFit"></image>
		</view>
		<view class="top_img_container">
			<view class="img_item_my img_item">
				<view class="img">
					<image class="add_icon" :src="addIcon" />
					<image width="128rpx" height="128rpx" round :src="gril1" mode="center" />
				</view>
				<view class="name"><text>自己本人</text></view>
			</view>
			<view class="img_item" v-for="item in userList" :key="item.id">
				<view class="img">
					<image width="112rpx" height="112rpx" round :src="item.img" mode="center" />
				</view>
				<view class="name">
					<text>{{ item.name }}</text>
				</view>
			</view>
		</view>
		<view class="tab_container">
			<view class="tab_item active_tab_item"><text>相亲推荐</text></view>
			<view class="tab_item"><text>红娘精选</text></view>
		</view>
		<view class="vlog_list_container">
			<view class="vlog_item" v-for="item in vlogList" :key="item.id">
				<image class="vlog_img" :src="item.bgBg" mode="scaleToFill" />
				<view class="vlog_tag_container">
					<view class="vlog_tag" v-for="tag in item.tagList" :key="tag.id">
						<text>{{ tag.name }}</text>
					</view>
				</view>
				<view class="action_container">
					<image class="action_bg" :src="baseBg"></image>
					<view class="action_item">
						<image :src="icon1" class="action_icon"></image>
					</view>
					<view class="action_item">
						<image :src="icon2" class="action_icon"></image>
					</view>
					<view class="action_item">
						<image :src="icon3" class="action_icon"></image>
					</view>
				</view>
				<view class="page_title_container">
					<text>{{ item.pageTitle }}</text>
				</view>
				<view class="info_container">
					<image class="info_img" :src="item.img" mode="center"></image>
					<view style="display: flex; flex-wrap: wrap; align-items: center">
						<view class="info_name">{{ item.name }}</view>
						<view class="info_other">现居地：{{ item.address }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import gril1 from '@/static/images/gril1.png'
	import addIcon from '@/static/images/add.png'
	import bgBg from '@/static/images/bg.png'
	import baseBg from '@/static/images/base.png'
	import icon1 from '@/static/images/icon1.png'
	import icon2 from '@/static/images/icon2.png'
	import icon3 from '@/static/images/icon3.png'
	import profile2 from '@/static/images/profile2.png'
	import logo from '@/static/images/logo1.png'

	export default {
		data() {
			return {
				logo,
				addIcon,
				gril1,
				icon1,
				icon2,
				icon3,
				safeAreaInsets: {},
				userList: [],
				vlogList: [],
			}
		},
		created() {
			this.safeAreaInsets = uni.getSystemInfoSync().safeAreaInsets
			this.getUserList()
			this.getVlogList()
		},
		methods: {
			getUserList: function() {
				const arr = []
				for (let i = 0; i < 10; i++) {
					arr.push({
						id: i,
						name: 'Selena' + i,
						img: i % 2 === 0 ? gril1 : profile2,
					})
				}
				this.userList = arr;
			},
			getVlogList: function() {
				const arr = [];
				for (let i = 0; i < 10; i++) {
					arr.push({
						id: i,
						name: 'Miranda Kehlani' + i,
						img: profile2,
						bgBg,
						address: '上海',
						tagList: [{
								id: i,
								name: '努力撸铁',
							},
							{
								id: i + 10,
								name: '一起去爬旧金山',
							},
						],
						pageTitle: '我要找老婆，我是大帅哥',
					})
				}
				this.vlogList = arr;
			}
		}
	}
</script>

<style scoped lang="scss">
	.home_container {
		// height: 100vh;
		padding: 0 32rpx;
		background: #ffeef2;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.title {
		font-size: 50rpx;
		font-weight: bold;
		line-height: 73rpx;
		color: #4b164c;

		.logo {
			width: 100px;
			height: 60px;
		}
	}

	.top_img_container {
		display: flex;
		flex-wrap: nowrap;
		gap: 40rpx;
		width: 100%;
		margin: 30rpx 0 48rpx 0;
		overflow: auto;

		.img_item {
			display: flex;
			flex-direction: column;
			align-items: center;

			.img {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 128rpx;
				height: 128rpx;
				background-color: #fdf7fd;
				border: 4rpx solid #FF5678;
				border-radius: 50%;
			}

			.name {
				max-width: 120rpx;
				font-size: 28rpx;
				line-height: 39rpx;
				color: #22172a;
				text-align: center;
				word-wrap: break-word;
			}
		}

		.img_item_my {
			.img {
				position: relative;
				background-color: unset;
				border: unset;
			}

			.add_icon {
				position: absolute;
				right: 5px;
				bottom: 5px;
				z-index: 100;
				width: 16px;
				height: 16px;
				border-radius: 50%;
			}
		}
	}

	.tab_container {
		display: flex;
		align-items: center;
		height: 88rpx;
		padding: 8rpx;
		background: #f8e7f6;
		border-radius: 32rpx 32rpx 32rpx 32rpx;

		.tab_item {
			display: flex;
			flex: 1;
			gap: 30;
			align-items: center;
			justify-content: center;
			height: 100%;
			font-size: 28rpx;
			font-weight: 600;
			color: #4b164c;
		}

		.active_tab_item {
			background: #ffffff;
			border-radius: 32rpx;
		}
	}

	.vlog_list_container {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
		margin-top: 48rpx;

		.vlog_item {
			position: relative;
			height: 686rpx;
			overflow: hidden;
			background: linear-gradient(180deg, rgba(75, 22, 76, 0) 0%, rgba(75, 22, 76, 0.7) 100%);
			border-radius: 50rpx;

			.vlog_img {
				position: relative;
				display: inline-block;
				width: 100%;
				height: 100%;
				border-radius: 50rpx;
			}

			.vlog_tag_container {
				position: absolute;
				top: 32rpx;
				left: 32rpx;
				display: flex;
				flex-wrap: wrap;
				gap: 20rpx;
				width: calc(100% - 64rpx);

				.vlog_tag {
					display: flex;
					align-items: center;
					justify-content: center;
					max-width: 250rpx;
					padding: 16rpx 24rpx;
					font-size: 32rpx;
					font-weight: 500;
					line-height: 32rpx;
					color: #ffffff;
					background: rgba(255, 255, 255, 0.2);
					border: 2rpx solid rgba(255, 255, 255, 0.2);
					border-radius: 64rpx 64rpx 64rpx 64rpx;

					text {
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.action_container {
				position: absolute;
				top: 50%;
				right: 0;
				display: flex;
				flex-direction: column;
				gap: 24rpx;
				align-items: center;
				justify-content: center;
				width: 128rpx;
				height: 368rpx;
				transform: translateY(-50%);

				.action_bg {
					position: absolute;
					top: 0;
					left: 0;
					z-index: -1;
					width: 100%;
					height: 100%;
				}

				.action_item {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 80rpx;
					height: 80rpx;
					background: rgba(255, 255, 255, 0.4);
					border-radius: 50%;

					.action_icon {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}

			.info_container {
				position: absolute;
				bottom: 32rpx;
				left: 0;
				display: flex;
				gap: 24rpx;
				margin: 0 32rpx;

				.info_img {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
				}

				.info_name {
					font-size: 28rpx;
					font-weight: 600;
					color: #ffffff;
				}

				.info_other {
					width: 100%;
					margin-top: 8rpx;
					font-size: 22rpx;
					font-weight: 500;
					line-height: 28rpx;
					color: #ffffff;
					letter-spacing: 2px;
				}
			}

			.page_title_container {
				position: absolute;
				bottom: 140rpx;
				left: 32rpx;
				width: 494rpx;
				font-size: 40rpx;
				font-weight: 600;
				line-height: 48rpx;
				color: #ffffff;
				text-align: left;
				word-wrap: break-word;
			}
		}
	}
</style>